/**
 * 新增用户信息
 */
import { Button, Modal } from 'antd';
import React, { useState } from 'react';
import axios from 'axios'
import {useNavigate } from 'react-router-dom'


const AddUser = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  //定义路由变量
  const navigate = useNavigate();


  //提交方法
  const addUserSubmit = (event) =>{
    //取消事件的默认动作
    event.preventDefault();
    //生命头文件
    let config = {headers:{'Content-Type':'multipart-/form-data'},withCredentials:true}
    //进行后台请求
    axios({
      method:'post',
      url:'http://localhost/mall-basic-service/basic/user/addUser',
      params:{
        username:event.target.username.value,
        password:event.target.password.value,
        nickname:event.target.nickname.value,
        type:event.target.type.value,
        phone:event.target.phone.value
      }
    },config).then((response)=>{
      //判断如果成功跳转到登录界面
      const code = response.data.code
      if(code === 200){
        navigate('/login')
      }
    }).catch(function (error) {
      //处理异常数据
    })
  }
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div>
      <Button onClick={showModal}>
        注册
      </Button>
      <Modal title="注册" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          <form onSubmit={addUserSubmit}>
            <label>
              用户名称:&emsp;
              <input className="form-control" type="text" id="username" name ="username"/></label><br/>
            <label>
              登录密码:&emsp;
              <input className="form-control" type="password" id="password" name ="password"/></label><br/>
            <label>
              昵称:&emsp;
              <input className="form-control" type="text" id="nickname" name ="nickname"/></label><br/>
            <label>
              用户角色:&emsp;
              <input  type="radio" name="type" id="type" value="1" checked="true"/>采购人 &emsp;
              <input type="radio" name="type" id="type" value="2"/>供应者 &emsp;
              <input type="radio" name="type" id="type" value="3"/>管理员 &emsp;
            </label><br/>
            <label>
              手机号码:&emsp;
              <input className="form-control" type="text" name="phone" id="phone"/>
            </label>
            <br/>
            <label>
              <button className="btn btn-primary" type="submit">提交</button> &emsp;
              <button className="btn btn-primary" type="reset">重置</button>
            </label>

          </form>
      </Modal>
    </div>
  );
};
export default AddUser;